<template>
    <!---v3不再强制指定vue文件只有一个根节点了,可以有多个节点,v2则报错-->
    <div>
        这是数字:{{ numberRef }}
        <el-input-number v-model="numberRef" :min="0" :max="10" @change="handleChange" />
    </div>
    <div>数字是:{{ countComputed }}</div>
    <child :value="valueRef" :maxLength="10" @onInput="onInput"></child>
    <div>我的nianling是{{ age }}</div>
</template>
<script>
//setup函数式组件的概念在于模块化，对于大型或者复杂项目有一定的优势,因此，相关的钩子函数都是按需导入的
import { onMounted, reactive, ref, toRefs, computed, watch, watchEffect, getCurrentInstance } from "vue";
//hooks
import child from "@/components/child.vue";
import useMousePosition from "@/hooks/useMousePosition";
export default {
    components: {
        child
    },
    setup() {
        //取代v2的this
        const { appContext } = getCurrentInstance()
        const hello = () => {
           console.log(appContext.config.globalProperties)
        }
        hello()
        //通过ref声明一个数据驱动的变量
        const numberRef = ref(0)
        const valueRef = ref('')
        const state = reactive({
            name: '阿宝',
            age: 38,
            job: 'kaifa'
        })
        //hooks
        let point = useMousePosition()
        //监听
        watch(numberRef, (newValue, oldValue) => {
            console.log(`watch当前数字增加了,${newValue},${oldValue}`)
        })
        //监听依赖
        watchEffect(() => {
            const name = state.name
            const age = state.age
            console.log(`watchEffect执行了年龄增加${age}`)
            console.log(`watchEffect执行了${name}`)
        })
        //接收到的参数
        const onInput = (value) => {
            // 接受子组件VInput返回的值
            console.log(value)
            // 改变对应的值
            valueRef.value = value
        }
        //事件
        const handleChange = ((value) => {
            state.age++
            console.log((`${state.name}-${numberRef.value}`));
        });
        //计算属性
        const countComputed = computed(() => {
            return 'computed数字播报' + numberRef.value
        });
        //生命周期函数都是箭头函数，锁定this的作用,发请求
        onMounted(() => {
            console.log((`${state.name}-${numberRef.value}`));
        })
        //所有要用于模板上的数据都需要return出来
        return {
            numberRef,
            handleChange,
            countComputed,
            point,
            valueRef,
            onInput,
            ...toRefs(state)
        }
    }
}
</script>
<style scoped></style>